<template>
  <div class="box">
    <div class="bigbox">
      <div class="boo">
         <div class="title" id="top">{{ title }}</div>
      <div class="content" v-html="content"></div>

      </div>
      <a class="fixed" href="#top">
        <img src="../assets/image/返回顶部.png" alt="" srcset="" />
      </a>
    </div>
    
     
    <div class="small">
      <div class="smallbox">
        <div
          style="
            margin-left: 5%;
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 10px;
          "
        >
          相关文档
        </div>
        <div
          class="smalltitle"
          v-for="(item, i) in getDoc"
          @click="lookText(item, i)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      content: "",
      type: "",
      getDoc: "",
    };
  },
  created() {
    document.title = localStorage.getItem("title");
    this.title = localStorage.getItem("title");
    this.type = localStorage.getItem("type");
    this.content = localStorage.getItem("content");
    this.getDocs();
  },
  methods: {
    getDocs() {
      this.$http(
        "/stage/doc/getHelpDoc",
        {
          current: 1,
          size: 999,
          type: localStorage.getItem("type"),
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            console.log(res.data.data);
            this.getDoc = res.data.data.records;
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    lookText(text, data) {
      console.log(data, text);
      let { href } = this.$router.resolve({
        name: "帮助文档查看",
      });
      console.log(localStorage.getItem("type"));
      localStorage.setItem("type", text.type);
      localStorage.setItem("title", text.title);
      localStorage.setItem("content", text.content);
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped>
.box {
  background: #ccc;
  padding-bottom: 15px;
  padding-top: 15px;
  display: flex;
  height: 100vh;
}
.title {
  line-height: 100px;
  font-weight: bold;
  text-align: center;
  font-size: 30px;
}
.content {
  width: 70%;
  margin-left: 5%;
}
.bigbox {
  width: 77%;
  background: #fff;
  margin-left: 1%;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-radius: 5px;
  height: 95vh;
  /* overflow-y: scroll; */
  /* overflow-y: auto; */
  position: relative;
}

.smallbox {
  width: 90%;
  background: #fff;

  margin-bottom: 15px;
  display: inline-block;
  border-radius: 5px;
  padding: 20px 0;
  overflow: hidden;

  word-break: keep-all;

  white-space: nowrap;
  margin-left: 3%;
  text-overflow: ellipsis;
}
.smallbox .smalltitle {
  margin-left: 10%;
  text-decoration: underline;
  color: #666;
  cursor: pointer;
}
.small {
  width: 20%;
}
.boo{
    background: #fff;
  margin-left: 1%;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-radius: 5px;
  height: 95vh;
  /* overflow-y: scroll; */
  overflow-y: auto;
}
.fixed {
position: fixed;
bottom: 40px;
right: 24%;
}
.fixed img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}
</style>